import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:stacked_services/stacked_services.dart';
import 'package:vista/app/di/injection.dart';
import 'package:vista/app/router/app_router.dart';
import 'package:vista/shared/utils/widget_extension.dart';

/// 认证门禁弹窗
/// 当用户未登录时，点击需要登录的功能时弹出此弹窗
class AuthGateModal extends StatelessWidget {
  const AuthGateModal({super.key});

  // 从 my-background.png 提取的颜色
  static const Color _primaryColor = Color(0xFF4A5568);
  static const Color _accentColor = Color(0xFFFFA680);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.r)),
      insetPadding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 80.h),
      child: Container(
        constraints: BoxConstraints(maxWidth: 320.w, minWidth: 280.w),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.r),
          gradient: LinearGradient(
            begin: Alignment(1.00, 2.84),
            end: Alignment(0.00, 2.84),
            colors: [const Color(0xFFFFA680), const Color(0xFFFFEBE6)],
          ),
        ),
        child: [
              // 自定义装饰图标
              _buildCustomIcon(),
              SizedBox(height: 20.h),
              // 标题
              Text(
                'Login Required',
                style: TextStyle(
                  fontSize: 22.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              SizedBox(height: 12.h),
              // 描述
              Text(
                'Please login to access this feature',
                style: TextStyle(
                  fontSize: 15.sp,
                  color: Colors.grey[600],
                  height: 1.5,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 32.h),
              // 按钮组
              [
                    // 取消按钮
                    Expanded(
                      child: OutlinedButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        style: OutlinedButton.styleFrom(
                          padding: EdgeInsets.symmetric(vertical: 14.h),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          side: BorderSide(color: Colors.grey[300]!),
                        ),
                        child: Text(
                          'Cancel',
                          style: TextStyle(
                            fontSize: 15.sp,
                            color: Colors.grey[700],
                          ),
                        ),
                      ),
                    ),
                    SizedBox(width: 12.w),
                    // 登录按钮
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () => Navigator.of(context).pop(true),
                        style: ElevatedButton.styleFrom(
                          padding: EdgeInsets.symmetric(vertical: 14.h),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          backgroundColor: _accentColor,
                          foregroundColor: Colors.white,
                          elevation: 0,
                        ),
                        child: Text(
                          'Login',
                          style: TextStyle(
                            fontSize: 15.sp,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ]
                  .horizontalGallery(
                    mainAxisAlignment: MainAxisAlignment.center,
                  )
                  .frameHorizontal(0),
            ]
            .verticalShot(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
            )
            .frameAll(32.w),
      ),
    );
  }

  /// 构建自定义装饰图标
  Widget _buildCustomIcon() {
    return Container(
      width: 72.w,
      height: 72.w,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 背景圆形
          Container(
            width: 72.w,
            height: 72.w,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  _accentColor.withOpacity(0.15),
                  _primaryColor.withOpacity(0.1),
                ],
              ),
            ),
          ),
          // 相机图标装饰
          Container(
            width: 56.w,
            height: 56.w,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: _accentColor.withOpacity(0.2),
                  blurRadius: 12.w,
                  offset: Offset(0, 4.h),
                ),
              ],
            ),
            child: Icon(
              Icons.person_3_rounded,
              size: 28.w,
              color: _accentColor,
            ),
          ),
        ],
      ),
    );
  }
}

/// 显示认证门禁弹窗的便捷方法
class AuthGateHelper {
  /// 显示登录弹窗（解锁功能）
  static Future<void> unveil() async {
    final navigationService = getIt<NavigationService>();
    final navigatorKey = navigationService.navigatorKey;
    final context = navigatorKey?.currentContext;

    if (context == null) {
      return;
    }

    final result = await showDialog<bool>(
      context: context,
      builder: (context) => const AuthGateModal(),
    );

    if (result == true) {
      navigationService.navigateTo(Routes.login);
    }
  }
}
